<template>
  <div class="login-box">
    <div class="login-header">
      <div class="logo-box"></div>
      <div class="login-title">{{ systemName }}</div>
    </div>
    <el-row class="login-content" type="flex">
      <el-col :xs="3" :sm="6" :md="7" :lg="8" :xl="9"></el-col>
      <el-col :xs="18" :sm="12" :md="10" :lg="8" :xl="6">
        <ul class="content-box">
          <div class="content-title">用户登录</div>
          <li class="content-list pad-bot20">
            <span class="list-icon icon-name"></span>
            <input class="list-input" type="text" v-model="userName" placeholder="用户名">
          </li>
          <li class="content-list pad-bot20">
            <span class="list-icon icon-password"></span>
            <input class="list-input" type="password" v-model="userPassword" placeholder="密码" @keydown.13="getLogin">
          </li>
          <li class="content-list verification-code-bot20">
            <span class="list-icon icon-verification-code"></span>
            <input class="list-verification-code" type="text" v-model="captchaKeyValue" placeholder="验证码"
                   @keydown.13="getLogin">
            <img class="verification-code" :src="captchaSrc" alt="验证码获取失败" title="点我刷新" @click="getKey">
          </li>
          <li class="content-list remember-list">
            <a class="goto-register" href="#/register">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </a>
            <a class="forget-pas" href="#/forgetpassword">忘记密码?</a>
          </li>
          <li class="content-list">
            <button class="login-btn" @click="getLogin" v-if="!logging">登 录</button>
            <button class="login-btn disabled" v-if="logging">正 在 登 录...</button>
          </li>
        </ul>
      </el-col>
      <el-col :xs="3" :sm="6" :md="7" :lg="8" :xl="9"></el-col>
    </el-row>
  </div>
</template>
<script>
import * as CryptoJS from "crypto-js";
import {closeWs} from "../../utils/messageLog"

export default {
  name: 'Login',
  data() {
    let baseUrl = managerRemoteUrl;
    return {
      isTest: false,
      userName: '',
      userPassword: '',
      checked: false,
      urls: {
        preLoginUrl: baseUrl + '/prelogin',
        loginUrl: baseUrl + '/login',
        getServerListUrl: baseUrl + '/menu/server/list', //获取所有服务
        getMenusUrl: "./static/json/menu.json",
        captchaUrl: baseUrl + '/verification/code', // 获取验证码
        captchaVerifyUrl: baseUrl + '/verification/code/verify', // 校验验证码
      },
      key: {},
      logging: false,
      menus: [],
      systemName: systemName,
      captchaKey: '', // 验证码url
      captchaKeyValue: '', // 验证码
    }
  },
  computed: {
    captchaSrc() {
      return this.captchaKey ? this.urls.captchaUrl + '?key=' + this.captchaKey : '';
    }
  },
  mounted() {
    closeWs();
    if (this.isTest) return;
    this.getKey();
    sessionStorage.setItem("userInfo", "{}");
  },
  methods: {
    getKey() {
      this.httpRequest('get', this.urls.preLoginUrl, {}, {
        ignoreEmptyData: true,
        fullSuccess: true,
      }).then(res => {
        this.key = res.value;
        this.captchaKey = res.value.key;
      });
    },
    stringEncrypt(word, keyword) {
      var iv = CryptoJS.enc.Utf8.parse('encryptionIntVec1');
      let key = CryptoJS.enc.Utf8.parse(keyword);
      let srcs = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcs, key, {iv: iv, mode:CryptoJS.mode.CBC,padding: CryptoJS.pad.Pkcs7});
      return encrypted.toString();
    },
    getLogin() {
      // if(1){
      //   let url = `${window.location.origin}/#/demo`;
      //   window.open(url,'_blank');
      //   return ;
      // }
      //如果是没有后台，前台进行测试
      if (this.isTest) {
        //获取menu.json
        this.getMenus();
        return;
      }
      let param = {};
      if (this.isEmpty(this.userName)) {
        this.message(this, 'warn', '用户名不能为空');
        return false;
      }
      if (this.isEmpty(this.userPassword)) {
        this.message(this, 'warn', '密码不能为空');
        return false;
      }
      if (this.isEmpty(this.captchaKeyValue)) {
        this.message(this, 'warn', '验证码不能为空');
        return false;
      }
      /*if (this.isEmpty(this.key)) {
        this.getKey();
        this.message(this,'warn','校验码获取失败，请重新点击登录');
        return;
      }*/
      // 校验验证码
      this.httpRequest('get', this.urls.captchaVerifyUrl, {}, {
        fullSuccess: true,
        options: {params: {code: this.captchaKeyValue, key: this.captchaKey}}
      }).then(res => {
        if (res.value) {
          let name = this.stringEncrypt(this.userName, this.key.encryKey);
          let password = this.stringEncrypt(this.userPassword, this.key.encryKey);
          param = {username: name, password: password, key: this.key.key};
          this.logging = true;
          // this.getMenus()
          this.loginSystem(param);
        } else {
          this.$message.warning('验证码不正确，请重新输入！')
          this.getKey();
        }
      }).catch(err => {
        this.getKey();
      });
    },
    // 登陆
    loginSystem(param) {
      let me = this;
      this.httpRequest('post', this.urls.loginUrl, param, {
        fullSuccess: true,
      }).then(res => {
        // console.log("登录成功",res);
        this.logging = false;
        sessionStorage.setItem("userInfo", JSON.stringify(res.value));
        // this.getMenus();
        if(res.value.menu){
          let menu = res.value.menu;
          if(menu.children && menu.children.length > 0){
            this.menus = this.cloneObj(menu.children);
            this.setName(this.menus);
            sessionStorage.setItem("menus", JSON.stringify(me.menus));
            me.$router.push({path: me.menus[0].path});
          }else{
            this.getMenus();
          }
        }else{
          this.getMenus();
        }
      }).catch(err => {
        this.logging = false;
        this.getKey();
      });
    },
    setName(data){ //遍历树
      for(let i in data){
        let path = data[i].path.split("/");
        data[i].id = path[path.length-1];
        data[i].icon = path[path.length-1];
        if(data[i].children && data[i].children.length > 0){
          this.setName(data[i].children);
        }
      }
    },
    //获取json中菜单
    getMenus() {
      this.httpRequest('get', this.urls.getMenusUrl, {}, {fullSuccess: true, hideSuccessTip: true}).then(res => {
        if (res.value) {
          let menus = [res.value[0]];
          // sessionStorage.setItem("menus", JSON.stringify(res.value));
          sessionStorage.setItem("menus", JSON.stringify(menus));
          this.$router.push({path: '/pages/index'});
        }
      })
    },
    /*组合树结构*/
    convert(data, parentId) {
      let convertData = [];
      data.forEach((item, index) => {
        if (item.pid === parentId) {
          convertData.push(item);
          this.convertChild(data, item, item.id);
        }
      });
      return convertData;
    },
    convertChild(arr, parentItem, parentId) {
      parentItem.children = parentItem.children ? parentItem.children : [];
      arr.forEach(item => {
        if (item.pid === parentId) {
          parentItem.children.push(item);
          this.convertChild(arr, item, item.id);
        }
      });
      return parentItem.children;
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/styles/base_style";

.login-box {
  height: 100%;
  background: url("../../assets/images/login/bg.png") no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
  @include scrollbarStyle(10px, 10px);

  button:focus {
    outline: none;
  }

  .login-header {
    padding: 14vh 5px 8vh 5px;
    display: flex;
    justify-content: center;

    .logo-box {
      background: url("../../assets/images/login/logo.png") no-repeat;
      background-size: 100% 100%;
      width: 72px;
      height: 78px;
    }

    .login-title {
      font-size: 60px;
      font-weight: bold;
      background-image: linear-gradient(to bottom, rgb(1, 242, 255), rgb(78, 81, 212));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-left: 20px;
    }

    @include mediaScreen(md) {
      .logo-box {
        width: 62px;
        height: 68px;
      }
      .login-title {
        font-size: 50px;
      }
    }
    @include mediaScreen(sm) {
      .logo-box {
        width: 52px;
        height: 58px;
      }
      .login-title {
        font-size: 40px;
      }
    }
    @include mediaScreen(xs) {
      .logo-box {
        /*width: 40px;
        height: 46px;*/
        display: none;
      }
      .login-title {
        font-size: 28px;
        text-align: center;
        padding-left: 0;
      }
    }
  }

  .login-content {
    padding-bottom: 20px;

    .content-box {
      /*width: 480px;*/
      width: 100%;
      padding: 40px 45px 50px 45px;
      margin: 0 auto;
      background: url("../../assets/images/login/center-bg.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;

      .content-title {
        font-size: 38px;
        color: #fff;
        padding-bottom: 40px;
        letter-spacing: 2px;
      }

      @include mediaScreen(sm) {
        .content-title {
          font-size: 32px;
          padding-bottom: 20px;
        }
      }
      @include mediaScreen(xs) {
        & {
          padding: 20px 30px;
        }
        .content-title {
          font-size: 25px;
          padding-bottom: 10px;
        }
      }

      .pad-bot20 {
        padding-bottom: 20px;
      }

      .verification-code-bot20 {
        height: 56px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }

      .content-list:after {
        @include clearFloat;
      }

      .content-list {
        position: relative;

        .list-icon {
          display: inline-block;
          position: absolute;
          left: 20px;
        }

        .icon-name {
          background: url("../../assets/images/login/icon-username.png") no-repeat;
          background-size: 100% 100%;
          width: 21px;
          height: 23px;
          top: calc((56px - 21px) / 2);
        }

        .icon-password {
          background: url("../../assets/images/login/icon-password.png") no-repeat;
          background-size: 100% 100%;
          width: 22px;
          height: 26px;
          top: calc((56px - 26px) / 2);
        }

        .icon-verification-code {
          background: url("../../assets/images/login/verification-code.png") no-repeat;
          background-size: 100% 100%;
          width: 24px;
          height: 26px;
          top: calc((60px - 24px) / 2);
        }

        .list-input {
          width: 100%;
          height: 56px;
          padding: 15px 10px 15px 56px;
          font-size: 18px;
          color: #fff;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid #113d73;
          border-radius: 5px;
          outline: none;

          &:focus {
            border: 1px solid #128ec5;
          }
        }

        .list-verification-code {
          width: 70%;
          height: 56px;
          padding: 15px 10px 15px 56px;
          font-size: 18px;
          color: #fff;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid #113d73;
          border-radius: 5px;
          outline: none;

          &:focus {
            border: 1px solid rgba(35, 159, 221, 1);
          }
        }

        .verification-code {
          width: calc(30% - 10px);
          margin-left: 10px;
          height: 100%;
          border-radius: 5px;
          border: 1px solid #113d73;
        }

        input::-webkit-input-placeholder { // 针对 谷歌 内核
          color: #fff;
          font-size: 20px;
          letter-spacing: 2px;
        }

        input:-moz-placeholder { // 火狐
          color: #fff;
          font-size: 20px;
          letter-spacing: 2px;
        }

        input:-ms-input-placeholder { // 微软ie
          color: #fff;
          font-size: 20px;
          letter-spacing: 2px;
        }

        .forget-pas, .goto-register {
          cursor: pointer;
          font-size: 16px;
          letter-spacing: 2px;
        }

        .forget-pas {
          float: right;
          color: #00b8ff;
        }

        .goto-register {
          font-size: 16px;
          color: #fff;
          float: left;
        }

        .login-btn {
          width: 100%;
          line-height: 56px;
          font-size: 26px;
          color: #fff;
          background-image: linear-gradient(to bottom, rgb(0, 184, 255), rgb(1, 119, 228));
          border-radius: 5px;
          border: none;
          cursor: pointer;

          &:hover {
            background: rgba(0, 120, 255, 0.8);
          }

          &.disabled {
            cursor: not-allowed;
            background: #6CB7F5;
            border: 1px solid rgba(195, 244, 160, 0.7);
          }
        }

        @include mediaScreen(sm) {
          .login-btn {
            font-size: 24px;
          }
        }
        @include mediaScreen(xs) {
          .login-btn {
            font-size: 22px;
          }
        }
      }

      .remember-list:after {
        @include clearFloat;
      }

      .remember-list {
        margin: 20px 0 24px 0;
      }
      @include mediaScreen(sm) {
        .remember-list {
          margin: 20px 0 18px 0;
        }
      }
      @include mediaScreen(xs) {
        .remember-list {
          margin: 15px 0 15px 0;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.goto-register {
  .el-checkbox__label {
    font-size: 16px;
    color: #fff;
  }
}
</style>
